<style scoped>
    .goods{
        text-align: left;
    }
    .goods div{
        float:left;
    }
    .goods img{
        width:50px;
        height:50px;
    }
    .goods .info{
        margin-left:10px;
        text-align: left;
        line-height: 1.8;
    }
</style>
<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="20" :order="1" class="tool-action">
                    <a-input placeholder="请输入关键词,例如:商品名称" v-model="params.name" @keyup.enter="onSearch" style="width:300px;margin-right:5px;"></a-input>
                    <a-select v-model="params.goodsTypeId" allowClear placeholder="请选择分类" style="width: 300px">
                        <a-select-option :value="item.id" v-for="item in typeList" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
<!--                    <a-cascader expandTrigger="hover" v-model="params.goodsType"  :options="typeList" :fieldNames="typeField" placeholder="请选择商品分类" style="width: 300px;margin-right:5px;"/>-->
                    <a-button type="primary" icon="search" @click="onSearch">查询</a-button>
                </a-col>
                <a-col :span="4" :order="2" class="tool-pagination">
                    <a-button type="primary" icon="plus" @click="onEdit(0)">新增</a-button>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template slot="index" slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot-scope="text,record" slot="name">
                    <div class="goods clearfix">
                        <div>
                            <img v-if="record.mainImage && record.mainImage!='' " :src="record.mainImage" />
                            <img v-else src="@/assets/images/nogoods.png" />
                        </div>
                        <div class="info">
                            <p>{{record.name}}</p>
                            <p>{{record.barCode}}</p>
                        </div>
                    </div>
                </template>
                <template slot="price" slot-scope="text,record">
                    {{fmMoney(record.minPrice,2,true) + (record.specSize>1?" ~ "+fmMoney(record.maxPrice,2):'')}}
                </template>
                <template slot="status" slot-scope="text,record">
                    <a-switch checkedChildren="上架" unCheckedChildren="下架" @change='onChangeStatus(record)'  :checked="record.status=='AVAILABLE'" />
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a @click="onEdit(record.id)"  class="ant-btn-text"><a-icon type="form" /></a>
                    <a-divider type="vertical" />
                    <a @click="onDeleted(record.id)"  class="ant-btn-text"><a-icon type="delete" /></a>
                </template>
            </a-table>
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action"></a-col>
                <a-col :span="12" :order="2" class="tool-pagination">
                    <a-pagination v-if="total>params.pageSize" :total="total"  @change="onChange" :current="params.current" :showTotal="total => `共 ${total} 条`" :pageSize="params.pageSize" :defaultCurrent="1"/>
                </a-col>
            </a-row>
        </div>
    </div>
</template>
<script>
    import {findList as findGoodsList,deleted,changeStatus} from "@/api/goods";
    import {findList as findTypeList} from "@/api/goodsType";
    import {fmMoney} from "@/utils/index";

    const columns = [
        {title: '序号', dataIndex: 'index',width: 60, align:'center',scopedSlots: { customRender: 'index' }},
        {title: '商品名称',dataIndex: 'name',scopedSlots: { customRender: 'name' }},
        {title: '分类',dataIndex: 'typeName',width: 160,align:'center'},
        {title: '价格',dataIndex: 'price',width: 150,align:'center',scopedSlots: { customRender: 'price' }},
        {title: '单位',dataIndex: 'unitName',width: 80,align:'center'},
        {title: '状态',dataIndex: 'status',width: 100,align:'center',scopedSlots: { customRender: 'status' }},
        {title: '操作',key: 'operation',align:'center',width: 100,scopedSlots: { customRender: 'operation' }}];
    export default {
        name: 'WaterGoodsList',
        data() {
            return {
                columns,
                dataList: [],
                typeList:[],  //分类列表
                params:{
                    name:'',
                    goodsType:[],
                    goodsTypeId: undefined,
                    current:1,
                    pageSize:10,
                    sorter:{
                        field:'',
                        order:'',
                    },
                },
                total:0,
                loading:false,
                typeField:{
                    label: 'name', value: 'id', children: 'children'
                }
            }
        },
        methods: {
            fmMoney,
            onSearch(){
                this.params.current = 1;
                this.onLoad();
            },
            onChange(current){
                this.params.current = current;
                this.onLoad();
            },
            //规格列表
            onSpecList(goodsId){
                this.$router.push({name:'GoodsSpecList',query:{goodsId:goodsId}});
            },
            //上下架
            onChangeStatus(row){
                let statusStr = "";
                statusStr = row.status=='AVAILABLE'?'下架':'上架';
                let _this = this;
                this.$confirm({
                    title: '确认'+statusStr+row.name+'吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        row.status = row.status=='AVAILABLE'?'FREEZE':'AVAILABLE';
                        _this.handleChangeStatus(row.id,row.status);
                    }, onCancel() {},
                })
            },
            async handleChangeStatus(id,status){
                let _this = this;
                let resp = await changeStatus(id,status);
                if(this.qUtil.validResp(resp)){
                    this.$success({title:'保存成功!',okText:'确定',
                        onOk(){_this.onLoad();}})
                }else{
                    this.$error({title:resp.msg,okText:'确定'})
                }
            },
            //编辑
            onEdit(id){
                this.$router.push({name:'WaterGoodsEdit',params:{id:id}});
            },
            //删除
            onDeleted(id){
                let _this = this;
                this.$confirm({
                    title: '确认删除该商品信息吗?',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {_this.handleDelete(id);},
                    onCancel() {},
                });
            },
            async handleDelete(id){
                let resp = await deleted(id);
                if(this.qUtil.validResp(resp)) {
                    this.$success({title:'删除成功!',okText:'确定'});
                    this.onLoad();
                }
            },
            //得到分类
            async onLoadTypeList(){
                let resp = await findTypeList({status: 'AVAILABLE'})
                if(this.qUtil.validResp(resp)){
                  this.typeList = resp.data.dataList || []
                }
            },

            async onLoad(){
                this.loading = true;
                let resp = await findGoodsList(this.params);
                console.log("dfsdf===>",resp)
                this.loading = false;
                if(!this.qUtil.validResp(resp)){
                    this.$error({title:'请求失败!',okText:'确定'});
                    return false;
                }
                this.total = resp.data.total;
                this.dataList = resp.data.dataList || []
            }
        },
        mounted(){
            this.onLoadTypeList();
            this.onLoad();
        }
    }
</script>
